<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2024/5/22
  Time: 21:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<jsp:include page="commons/header.jsp"></jsp:include>
<body>
<div class="tz_content">
    <jsp:include page="commons/leftList.jsp"></jsp:include>
    <div class="t_right">
        <jsp:include page="commons/location.jsp"></jsp:include>
        <div class="r_message" >
            <canvas id="myChart"></canvas>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="js/jquery.min.js"></script>
<script>
    window.onload = function() {
        // 获取canvas元素并初始化Chart.js图表
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: '销量',
                    data: [],
                    backgroundColor: 'rgba(75, 192, 192, 0.4)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            // 其他选项...
        });

        // 使用jQuery的$.ajax方法从Servlet获取数据
        $.ajax({
            url: 'PointServlet', // Servlet的URL
            type: 'POST', // 请求类型
            dataType: 'json', // 预期服务器返回的数据类型
            success: function(data) {
                console.log(data); // 打印返回的数据，确保数据格式正确
                myChart.data.labels = data.labels;
                myChart.data.datasets[0].data = data.datasets[0].data;
                // 如果需要更新背景色，可以这样设置
                // myChart.data.datasets[0].backgroundColor = data.datasets[0].backgroundColor;

                // 调用update方法重新渲染图表
                myChart.update();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 处理请求失败的情况
                console.error('Error fetching data: ' + textStatus, errorThrown);
            }
        });
    };

</script>

